<link rel="stylesheet" href="CSS/production_order.css" type="text/css" />
<div class="production_order" v-cloak>
    <Spin fix v-show="pageloading">
        <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
        <div>Loading</div>
    </Spin>
    <Tabs style="height: 100%;" v-model="tabName">
        <tab-pane icon="plus" label="产生订单" name="name1">
            <div id="name1">
                <div class="main" style="margin-bottom:20px;">
                    <table class="addTable">
                        <tr>
                            <td>订单号</td>
                            <td>
                                <auto-complete class="addInput" transfer clearable :data="orderidList" v-model="orderid"></auto-complete>
                            </td>       
                            <td>面积</td>
                            <td>
                                <input-number class="addInput" :min="0" class="inputsth" v-model="area"></input-number>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                客户名称
                            </td>
                            <td>
                                <auto-complete class="addInput" clearable :data="customerList" v-model="customer"></auto-complete>
                            </td>
                            <td>单位面积</td>
                            <td>
                                <input-number class="addInput" :min="0" class="inputsth" v-model="oneofarea"></input-number>
                            </td>
                        </tr>
                        <tr>
                            <td>送货地址</td>
                            <td>
                                <auto-complete class="addInput" clearable :data="bournList" v-model="bourn"></auto-complete>
                            </td>
                            <td>运费系数</td>
                            <td>
                                <input-number class="addInput" :min="0" class="inputsth" v-model="coefficient"></input-number>
                            </td>
                        </tr>
                        <tr>
                            <td>板材</td>
                            <td>
                                <auto-complete class="addInput" clearable :data="boardList" v-model="board"></auto-complete>
                            </td>
                            <td>层数</td>
                            <td>
                                <input-number class="addInput" :min="0" class="inputsth" v-model="numberofplies"></input-number>
                            </td>
                        </tr>
                        <tr>
                            <td>规格（楞型）</td>
                            <td>
                                <auto-complete class="addInput" clearable :data="fluteList" v-model="flute"></auto-complete>
                            </td>
                            <td>体积</td>
                            <td>
                                <input-number class="addInput" :min="0" class="inputsth" v-model="volume"></input-number>
                            </td>
                        </tr>
                        <tr>
                            <td>规格型号</td>
                            <td>
                                <auto-complete class="addInput" clearable :data="formatList" v-model="format"></auto-complete>
                            </td>
                            <td>装载量</td>
                            <td>
                                <input-number class="addInput" :min="0" class="inputsth" v-model="truckload"></input-number>
                            </td>
                        </tr>
                    </table>
                    <i-button type="primary" v-on:click="addOrder" style="margin-right:20px;">确认</i-button>
                </div>
                <div>
                    <i-table style="margin: 0 auto" highlight-row :columns="TBDcolumns" :data="TBDdata">
                    </i-table>
                </div>
            </div>
        </tab-pane>
        <tab-pane icon="ios-upload" label="手动拆单" name="name2">
            <div id="name2">
                <Steps :current="removeCurrent" size="small" style="text-align:center;padding:15px 0">
                    <Step title="选择订单" content="选择需要拆分的订单"></Step>
                    <Step title="拆分订单" content="对订单进行拆分"></Step>
                    <Step title="完成" content="完成拆分"></Step>
                </Steps>
                <h2 style="text-align:center;padding:15px;font-weight:100;"> {{ newRemoveOrder }}</h2>
                <i-table v-show="tableShow" @on-row-click="onRemove" height="600" style="margin: 0 auto" highlight-row ref="TBDTable" :columns="TBDcolumns"
                    :data="TBDdata"></i-table>
                    <Row>
                <div class="Order-Remove" v-show="removing">
                    <div class="Order-before">
                        <table border="1">
                            <tr>
                                <td>订单号</td>
                                <td colspan="3">
                                    {{ removeShow.orderid }}
                                </td>
                            </tr>
                            <tr>
                                <td>客户名称</td>
                                <td>{{ removeShow.customer }}</td>
                                <td>单位面积</td>
                                <td>{{ parseFloat(removeShow.oneofarea).toFixed(2) }}</td>
                            </tr>
                            <tr>
                                <td>送货地址</td>
                                <td>{{ removeShow.bourn }}</td>
                                <td>面积</td>
                                <td>{{ parseFloat(removeShow.area).toFixed(2) }}</td>
                            </tr>
                            <tr>
                                <td>板材</td>
                                <td>{{ removeShow.board }}</td>
                                <td>层数</td>
                                <td>{{ removeShow.numberofplies }}</td>
                            </tr>
                            <tr>
                                <td>规格（楞型）</td>
                                <td>{{ removeShow.flute }}</td>
                                <td>体积</td>
                                <td>{{ parseFloat(removeShow.volume).toFixed(2) }}</td>
                            </tr>
                            <tr>
                                <td>规格型号</td>
                                <td>{{ removeShow.format }}</td>
                                <td>运费系数</td>
                                <td>{{ removeShow.coefficient }}</td>
                            </tr>
                            <tr>
                                <td>装载量</td>
                                <td style="text-align:center;" colspan="3">
                                    <Slider :min="0" :max="truckloadMax" v-model="truckloadNow" show-input></Slider>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="to-remove">
                        <Icon type="shuffle" size="50" color="#6495ED">
                        </Icon>
                    </div>
                    <div class="Order-before">
                        <table border="1">
                            <tr>
                                <td>订单号</td>
                                <td colspan="3">{{ }}</td>
                            </tr>
                            <tr>
                                <td>客户名称</td>
                                <td>{{ removeShow.customer }}</td>
                                <td>单位面积</td>
                                <td>{{ parseFloat(removeShow.oneofarea).toFixed(2) }}</td>
                            </tr>
                            <tr>
                                <td>送货地址</td>
                                <td>{{ removeShow.bourn }}</td>
                                <td>面积</td>
                                <td>{{ parseFloat(afterArea).toFixed(2) }}</td>
                            </tr>
                            <tr>
                                <td>板材</td>
                                <td>{{ removeShow.board }}</td>
                                <td>层数</td>
                                <td>{{ removeShow.numberofplies }}</td>
                            </tr>
                            <tr>
                                <td>规格（楞型）</td>
                                <td>{{ removeShow.flute }}</td>
                                <td>体积</td>
                                <td>{{ parseFloat(afterVloume).toFixed(2) }}</td>
                            </tr>
                            <tr>
                                <td>规格型号</td>
                                <td>{{ removeShow.format }}</td>
                                <td>运费系数</td>
                                <td>{{ removeShow.coefficient }}</td>
                            </tr>
                            <tr>
                                <td>装载量</td>
                                <td colspan="3">
                                    {{ afterTruck }}
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                </Row>
                <div v-show="removeSuccess" style="height:400px;text-align:center;">
                    <Icon style="margin-top:150px" type="checkmark-round" size="50" color="#43CD80"></Icon>
                    <h2 style="color:#43CD80;margin-bottom:150px">拆分成功!</h2>
                    <i-button long type="success" icon="arrow-return-left" @click="initRemove" style="width:500px;height:50px;">继续拆分</i-button>
                </div>
                <div style="margin:0 auto;width:1300px;">
                    <i-button type="primary" style="margin-top: 30px;" @click="removeNext" v-show="!removeSuccess">下一步</i-button>
                    <i-button type="primary" style="margin-top: 30px;margin-right:10px;" v-show="removing" @click="removePre">上一步</i-button>
                </div>
            </div>
            
        </tab-pane>
        <tab-pane icon="ios-download" label="分配订单" name="name3">
            <div  id="name3">
                <div v-show="mainShow">
                    <h2 style="text-align:center;padding:15px;font-weight:100;"></h2>
                    <i-table style="margin: 0 auto" border highlight-row :columns="mergeCloums" :data="mergeData"></i-table>
                    <i-table @on-selection-change="mergeAllOrder" style="margin: 0 auto" highlight-row :columns="TBDcolumns_merge" :data="TBDdata"></i-table>
                    <i-table style="margin: 0 auto" highlight-row :columns="Truckcolumns" :data="truckList"></i-table>
                    <i-button long @click="getTruckList">刷新车辆</i-button>
                    <div style="width:80%;margin:0 auto;">
                        <a @click="auto">
                            <Card style="width:45%;height:40%;cursor: pointer;float:left" shadow>
                                <div style="text-align:center;padding:10%">
                                    <Icon type="navigate" size="100"></Icon>
                                    <h3>自 动 分 配 订 单</h3>
                                </div>
                            </Card>
                        </a>
                        <a @click="toMergeOrder">
                            <Card style="width:45%;height:40%;cursor: pointer;float:right" shadow>
                                <div style="text-align:center;padding:10%">
                                    <Icon type="ios-personadd" size="100"></Icon>
                                    <h3>手 动 分 配 订 单</h3>
                                </div>
                            </Card>
                        </a>
                    </div>
                </div>
                <div v-show="manualShow">
                    <Steps :current="mergeCurrent" size="small" style="text-align:center;padding:15px 0">
                        <Step title="选择车辆" content="选择需要配送的车辆"></Step>
                        <Step title="完成分配" content="完成拆分"></Step>
                    </Steps>
                    <h2 style="text-align:center;padding:15px;font-weight:100;"> {{ showTruckid }}</h2>
                    <i-table @on-row-click="selectTruck" style="margin: 0 auto" highlight-row :columns="Truckcolumns" :data="truckList"></i-table>
                    <i-switch v-model="isEmergency" style="float:left;left: 48.9%;margin-top: 9px;margin-bottom: 6px;"></i-switch>
                    <span style="float:left;margin-left: 41.5%;margin-top: 12.5px;margin-bottom: 6px;">订单加急：</span>
                    <span style="float:left;margin-left: 5.5%;margin-top: 12.5px;margin-bottom: 6px;">（否/是）</span>
                    <i-button long @click="toMergeOrder">下一步</i-button>
                    <i-button long @click="backMain">返回主页</i-button>
                </div>
                <div v-show="mergeSuccess" style="height:400px;text-align:center;">
                    <Icon style="margin-top:150px" type="checkmark-round" size="50" color="#43CD80"></Icon>
                    <h2 style="color:#43CD80;margin-bottom:150px">订单分配成功!</h2>
                    <i-button long @click="initMerge" type="success" style="width:500px;height:50px;">继续配送</i-button>
                </div>
                <div v-show="autoShow">
                    <div :name="i.toString()" style="    margin: 0px 20px 20px;
                                    background-color: rgb(248, 248, 249);
                                    border: 1px solid #dddee1;
                                    padding: 5px;
                                    box-shadow: 10px 10px 5px #888888;" v-for="(ad,i) in autoData">
                        <h2 style="text-align:center">
                            当前订单总体积: {{ ad.processed_volume }}
                        </h2>
                        <Alert show-icon v-if=" ad.probability > 1">
                            预计该订单近期会有新订单,建议等待
                        </Alert>
                        <i-table :columns="TBDcolumns" :data="ad.processed_id"></i-table>
                        <p>
                            <i-button long @click="autoSuccess(i)">确定分配</i-button>
                        </p>
                    </div>
                    <i-button long @click="backMain">返回主页</i-button>
                </div>
            </div>
        </tab-pane>
    </Tabs>
</div>
<script type="text/javascript" src="JS/page/delivery_note/production_order.js"></script>